// utils/request.js专门用来封装axios
// 安装3个步骤对axios进行封装
// 1.导入axios包
import axios from 'axios'
import store from '@/store'// 这个是导入的store文件夹下的indexjs
import router from '@/router'
import { Loading } from 'element-ui'

// 按需导入Loading成员
// 2.调用axios.create()函数，创建axios的实例对象，可以创建多个实例，不同的实例可以配置不同的根路径
const instance = axios.create({
  // 全局统一配置请求的根路径
  baseURL: 'http://www.liulongbin.top:3008'
})
// 用来存数loading实例的变量
let loadingInstance = null
// 为步骤2创建出来的instance配置拦截器
// 这是请求拦截器
instance.interceptors.request.use(function (config) {
  // Do something before request is sent
  // 要在return之前加token
  loadingInstance = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  console.log(config)
  // 结论：只有在.vue组件中，才可以使用this.$store或mapXXX辅助函数
  // 技巧：在js模块中如果想访问vuex全局的东西，直接导入vuex的store即可
  // 因为登录和注册的时候不需要加token，所以可以判断一下
  // startsWith()是字符串的方法，判断是否以某个值开头
  // 严谨是大家需要遵守的
  if (config.url.startsWith('/my')) {
    config.headers.Authorization = store.state.user.token
  }
  console.log(store)
  return config
}, function (error) {
  loadingInstance.close()
  // Do something with request error
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(function (response) {
  loadingInstance.close()
  return response
}, function (error) {
  loadingInstance.close()
  console.dir(error)
  if (error.response.status === 401) {
    // token过期或无效
    // 1.清空token
    store.commit('user/updateToken', '')
    // 2.清空info
    store.commit('user/updateInfo', {})
    // 3.跳转到登录页
    router.push('/login')
  }
  return Promise.reject(error)
})
// const instance2 = axios.create({
//   baseURL: ''
// })
// 实例instanceof构造函数
// 3.向外导出步骤2创建的axios实例，供外界使用
export default instance
// 打开npm官网打开axios的包可以看到instance里面有哪些内容
